<template>
  <p>person:{{ person }}</p>
  <button @click="changePerson">修改person</button>
  <button @click="person[1] = 9">修改之后的person</button>
  <p>names:{{ names }}</p>
  <button @click="changeNames">修改names</button>
  <button @click="names.data[0] = 'gouzi'">修改之后的names</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "",
});
</script>

<script setup lang="ts">
import { ref, reactive } from "vue";
let person = ref<Array<number>>([1, 2, 3, 4, 5]);
let names = reactive({ data: ["xiaowang", "dali", "xiaoming", "dazhang"] });

/* 
  如果我们要替换ref的value值,替换后的对象一旦放在了ref上,就会被转为代理对象,也就是说,替换的ref的value值仍然是响应式

*/
const changePerson = () => {
  // person.value[1] = 8;
  // person.value.splice(1, 1);

  const result = person.value.filter((item) => {
    return item % 2 !== 0;
  });

  person.value = result;
  console.log(person);
};
const changeNames = () => {
  /* 
    我们不能直接把reactive创建的代理对象替换了,否则当前的数据就没有响应式了
      - 使用ref创建响应式对象,因为替换ref的value,还是会变成响应式
      - 不要直接把我们要替换的数据作为reactive响应对象,而是在外层包裹一个对象,我们替换外边包裹的对象内属性的时候,依然所有的都有响应式
  
  
  */
  // names[1] = "dahuang";
  // names.splice(1, 1);
  /* const result = names.filter((item) => {
    return !item.startsWith("da");
  });

  // console.log(result);
  names = reactive(result); */

  names.data = names.data.filter((item) => {
    return !item.startsWith("da");
  });
};
</script>
